<template>
  <div>
    <el-row> 
      <el-col :sm="12" :lg="4" v-for="(item, index) in products" :key="item.id">
        <el-result>
          <template #icon>
            <el-image class="imgpro"
              :src="item.picUrl" 
              @click="detail(item.id)"
            />
            <br>
            <el-link type="primary" href="javascript:void(0)" @click="detail(item.id)">{{item.name}}</el-link>
            <el-divider direction="vertical" />
            <el-link type="primary" href="javascript:void(0)" @click="addcart(item.id)">加购物车</el-link>
          </template>
        </el-result>
      </el-col>
    </el-row>
    
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus";

const products = ref<any>([]);
const currentPage = ref(1);
const pageSize = ref(10); // 固定每页显示10条数据
const total = ref(0);

function detail(id: number) {
    ElMessage.info('查看详情对话框'+id)
}

function findProducts() {
    axios.get("/public/products/page", {
        params: {
            page: currentPage.value,
            size: pageSize.value
        }
    }).then(res => {
        products.value = res.data.records;
        total.value = res.data.total;
    })
}

function addcart(id: number) {
    ElMessage.info(`添加购物车${id}`)
} 

function handleCurrentChange(newPage: number) {
    currentPage.value = newPage;
    findProducts();
}

onMounted(() => {
    findProducts()
})
</script>

<style scoped>
.imgpro {
    width: 200px;
    height: 200px;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>    